<template>
    <div class="police">
        <section class="headBtn">
            <div :class="{ active: isActive1==1 }" @click="changeActive1(1,'S')">
                <span>供水<i class="iconfont icon-weixian2" v-show="isActive1==1"></i></span>
            </div>
            <div :class="{ active: isActive1==2 }" @click="changeActive1(2,'P')">
                <span>排水<i class="iconfont icon-weixian2" v-show="isActive1==2"></i></span>
            </div>
            <div :class="{ active: isActive1==3 }" @click="changeActive1(3,'W')">
                <span>污水<i class="iconfont icon-weixian2" v-show="isActive1==3"></i></span>
            </div>
        </section>
        <div class="list" v-for="item in list" :key="item.value" @click="goDetails(item)">
            <div class="head"><b>{{item.siteName}}</b><i class="iconfont icon-jiantou-copy"></i></div>
            <div class="flex">
                <div class="type">{{item.alarmParam}}：{{item.alarmValue}}</div><i class="iconfont icon-weixian2"></i>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            isActive1: 1,
            list: [],
            type: 'S',
            pageSize: 10
        }
    },
    mounted() {
        this.getList()
        this.windowscroll()

    },
    methods: {
        changeActive1(num, type) {
            this.list = []
            this.pageSize = 10
            this.isActive1 = num
            this.type = type
            this.getList()
        },
        //获取列表
        getList() {
            this.$api.police.alist({
                dicValue: this.type,
                pageNum: '1',
                pageSize: this.pageSize
            }).then(res => {
                if (res.success) {
                    this.list = res.data.list
                }
            });
        },
        goDetails(item) {
            this.$router.push({ path: 'details', query: { item: item } })
        },
        //加载
        windowscroll() {
            var that = this
            $(window).on("scroll", function () {    //给window绑定scroll触底事件
                // console.log($(window).scrollTop() + $(window).height() + 1 + ',' + $(document).height())
                if ($(window).scrollTop() + $(window).height() + 1 > $(document).height()) {
                    // $(".nextPage").trigger("click")
                    that.pageSize += 10
                    that.getList()
                }
            })
        }
    }
}
</script>

<style>
</style>
